如果只用一般表格顯示修改前後的資料，使用者可能不容易快速看出差異。因此，今天的目標是改善變更紀錄的呈現方式，讓使用者可以更直覺地確認每一筆資料被修改的內容。
一、設定變更紀錄的CSS樣式

.change-before {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    background: #f7ead7;
    color: #87551f;
    overflow-wrap: anywhere;
}
.change-after {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    background: #e1f1e9;
    color: #27675d;
    font-weight: 600;
    overflow-wrap: anywhere;
}

其中，.change-before使用淡橘色呈現原始資料，.change-after則使用淡綠色呈現清理後的資料，讓使用者可以快速辨識修改前後的差異。
另外，也設定表格容器的水平捲動功能，避免在較窄的螢幕上，表格內容因為欄位過多而難以閱讀。
二、顯示清理前後的資料

foreach ($changes as $change) {
    $originalValue = trim((string)$change['original']) === ''
        ? '(空白)'
        : (string)$change['original'];
    $patientId = htmlspecialchars(
        (string)$change['patient_id'],
        ENT_QUOTES,
        'UTF-8'
    );
    $field = htmlspecialchars(
        (string)$change['field'],
        ENT_QUOTES,
        'UTF-8'
    );
    $original = htmlspecialchars(
        $originalValue,
        ENT_QUOTES,
        'UTF-8'
    );
    $cleaned = htmlspecialchars(
        (string)$change['cleaned'],
        ENT_QUOTES,
        'UTF-8'
    );
    echo '<tr>';
    echo '<td>' . $patientId . '</td>';
    echo '<td>' . $field . '</td>';
    echo '<td><span class="change-before">' . $original . '</span></td>';
    echo '<td class="change-arrow">→</td>';
    echo '<td><span class="change-after">' . $cleaned . '</span></td>';
    echo '</tr>';
}

這段程式會依序顯示資料編號、欄位名稱、清理前的值與清理後的值。
當原始值為空白時，程式會將它顯示為「(空白)」。